<template>
    <div style="margin-top: 15px;" id="app">
        <el-input  placeholder="请输入内容" v-model="input4" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择">
                <el-option label="编号" value="1"></el-option>
                <el-option label="姓名" value="2"></el-option>
                <el-option label="电话" value="3"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" v-on:click="workerFind(input4)" >查询</el-button>
        </el-input>
        <el-table
                v-loading="loading"
                :data="tableData"
                @selection-change="handleSelectionChange"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="编号"
                    sortable
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="邮箱"
                    width="90">
            </el-table-column>
            <el-table-column align="right" width="80">
                <template slot="header">
                    <el-button type="primary" @click="save=true" size="mini" plain>添加</el-button>
                </template>
            </el-table-column>
            <el-table-column align="right" width="180">
                <template slot="header">
                    <el-button type="primary" @click="setExcel=true" size="mini" plain>导出为excel文件</el-button>
                </template>
                <template slot-scope="scope">
                <el-button size="mini" type="primary" plain @click="edit=true,getForm(scope.row.id)" v-if="scope.row">修改</el-button>
                <el-button size="mini" type="danger" plain @click="deleteWorker(scope.row)" v-if="scope.row">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                style="margin: 15px 0px;"
                prev-text="上一页" next-text="下一页" background
                layout="prev, pager, next, sizes, jumper, total"
                :page-sizes="[5,10,20,40]"
                :page-size="pageSize"
                :total="total"
                :current-page="pageNow"
                @current-change="findPage"
                @size-change="findSize">
        </el-pagination>
        <el-dialog title="修改员工信息" :visible.sync="edit" width="30%">
        <el-form  ref="editForm"  label-width="80px" :model="eform" :rules="editRules">
            <el-form-item label="编号" prop="id">
                <el-input v-model="eform.id" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
                <el-input v-model="eform.name"></el-input>
            </el-form-item>
            <el-form-item prop="age" label="年龄:">
                <el-input v-model="eform.age" ></el-input>
            </el-form-item>
            <!-- 性别-->
            <el-form-item prop="sex" label="性别:">
                <el-select v-model="eform.sex" placeholder="性别">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
            <!-- 电话-->
            <el-form-item prop="phone" label="电话:">
                <el-input v-model="eform.phone" ></el-input>
            </el-form-item>
            <!-- 邮箱-->
            <el-form-item prop="email" label="邮箱:">
                <el-input v-model="eform.email" ></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="edit = false">取 消</el-button>
            <el-button type="primary" @click="edit = false,updateWorker('editForm')">确 定</el-button>
          </span>
    </el-dialog>
        <el-dialog title="添加员工信息" :visible.sync="save" width="30%">
            <el-form  ref="sForm"  label-width="80px" :model="saveForm" :rules="editRules">
                <el-form-item label="编号" prop="id">
                    <el-input v-model="saveForm.id" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="saveForm.name"></el-input>
                </el-form-item>
                <el-form-item prop="age" label="年龄:">
                    <el-input v-model="saveForm.age" ></el-input>
                </el-form-item>
                <!-- 性别-->
                <el-form-item prop="sex" label="性别:">
                    <el-select v-model="saveForm.sex" placeholder="性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 电话-->
                <el-form-item prop="phone" label="电话:">
                    <el-input v-model="saveForm.phone" ></el-input>
                </el-form-item>
                <!-- 邮箱-->
                <el-form-item prop="email" label="邮箱:">
                    <el-input v-model="saveForm.email" ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="save = false">取 消</el-button>
            <el-button type="primary" @click="save = false,saveWorker('sForm')">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog title="导出为excel文件" :visible.sync="setExcel" width="30%">
            <el-form ref="form"  label-width="120px">
                <el-form-item label="导出文件夹路径">
                    <el-input v-model="form.path"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="setExcel = false">取 消</el-button>
            <el-button type="primary" @click="setExcel = false,excel(form.path)">确 定</el-button>
          </span>
        </el-dialog>
    </div>

</template>

<script>
    var list = [];
    /* 银行账户 */
    export function validateAccountNumber(str) {
        const reg = /^([1-9]{1})$/
        return reg.test(str)
    }
    export default {
        methods:{
            updateWorker(formName){
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        const _this = this
                        this.$http.post("worker/update", this.eform).then(function (resp) {
                            if (resp.data.code == 2000) _this.$message.success("修改成功")
                            location.reload();
                        });
                    } else {
                        this.$message.error("信息填写错误")
                    }
                })
            },
            saveWorker(formName){
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        const _this = this
                        console.log(_this.saveForm)
                        this.$http.post("worker/save", _this.saveForm).then(function (resp) {
                            if (resp.data.code == 2000) {
                                _this.$message.success('添加成功')
                                location.reload();
                            }
                        })
                    }else{
                        this.$message.error("信息填写错误")
                    }
                })
            },
            excel(path){
                const _this = this
                path=path+"/worker.xls"
                console.log(path)
                this.$http.post("worker/exportExcel",path).then(function(resp){
                    console.log(resp.data)
                    if(resp.data.code!=2000){
                        _this.$message.error(resp.data.msg);
                    }else{
                        _this.$message.success("导出成功");
                    }
                })
            },
            findPage(page){
                console.log("当前页数："+page);
                this.pageNow=page;
                this.findAllTableDataByPage();
            },
            findSize(size){
                console.log("当前页面记录条数："+size);
                this.pageSize=size;
                this.findAllTableDataByPage();
            },
            findAllTableDataByPage(){
                this.$http.get("worker/findByPage?pageNow="+this.pageNow+ "&pageSize=" + this.pageSize).then((res)=>{
                    // console.log(res.data);
                    this.tableData=res.data.salaries;
                    this.total=res.data.total;
                });
            },
            handleSelectionChange(val){
                console.log("handleSelectionChange--",val)
                this.tableChecked=val
            },
            getForm(id) {
                const _this = this
                this.$http.post("worker/findOne", id).then(function (resp) {
                        _this.eform = resp.data.data[0]

                })
            },
            workerFind(input){
                const _this = this
                if(input!==null&&input!==''&&this.select=="1"){
                    this.$http.post("worker/findOne",input).then(function(resp){
                        console.log(resp.data.data);
                        _this.tableData=resp.data.data
                    })
                }else if(input!==null&&input!==''&&this.select=="2"){
                    this.$http.post("worker/findByName",input).then(function(resp){
                        console.log(resp.data);
                        _this.tableData=resp.data.data
                    })
                }else if(input!==null&&input!==''&&this.select=="3") {
                    this.$http.post("worker/findByPhone", input).then(function (resp) {
                        console.log(resp.data);
                        _this.tableData = resp.data.data
                    })
                }else{
                    this.$http.post("worker/findAll").then(function(resp){
                        console.log(resp.data.data);
                        _this.tableData=resp.data.data
                    })
                }
            },

            deleteWorker(row){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post("worker/delete",row.id)
                    this.$http.post("login/delete",row.id)
                    location.reload();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    }
                    );
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                const _this = this
                this.$http.post("worker/findLastId").then(function(resp){
                    _this.saveForm.id=resp.data.data+1
                })
            },
        },
        data() {
            let num = /^(0|\+?[1-9][0-9]*)$/;
            let isNum = (rule, value, callback) => {
                if (!num.test(value)) {
                    return callback(new Error('格式错误'))
                } else {
                    callback()
                }
            };
            let percent = /^(?:[1-9]?\d|100)$/;
            let isPercent = (rule, value, callback) => {
                if (!percent.test(value)) {
                    return callback(new Error('请输入0-100的整数'))
                } else {
                    callback()
                }
            };
            const _this = this
            return {
                setExcel:false,
                getExcel:false,
                loading: false,
                total:0,//总页数，从后台查询
                pageNow:1,//当前页数，默认为1
                pageSize:20,//当前页显示的数据条数，默认为20
                input4:null,
                select: '请选择',
                tableData: null,
                findList:null,
                edit:false,
                save:false,
                form:[
                    {
                        path:'',
                    }
                ],
                eform:[],
                saveForm:{
                  id:'',
                    name:'',
                    sex:'',
                    age:'',
                    phone:'',
                    email:'',
                },
                editRules:{
                    name:[
                        //必填项
                        { required: true,message: "请输入员工姓名",trigger: "change"},
                        { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "change" },
                    ],
                    age:[
                        { required: true,message: "请输入员工年龄",trigger: "change"},
                        { validator:isPercent}
                    ],
                    phone:[
                        { required: true,message: "请输入员工电话",trigger: "change"},
                        { min: 5, max: 11, message: "长度在 5 到 11 位", trigger: "change" },
                        {validator:isNum}
                    ],
                    email:[
                        { required: true,message: "请输入员工邮箱",trigger: "change"},
                        {type:'email',message:"邮箱格式错误",trigger: "change"}
                    ]
                }
            }
        },
        created(){
            const _this = this
            this.$http.post("worker/findLastId").then(function(resp){
                _this.saveForm.id=resp.data.data+1
            })
            this.$http.post("worker/findList",window.sessionStorage.getItem("id")).then(function(resp){
                _this.tableData=resp.data.data
            })
        }
    }
</script>
<style>
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    .page{
        float: right;
    }
</style>